<template>
  <van-popup
    closeable
    close-icon-position="top-right"
    close-icon="cross"
    v-model="$store.state.is_show"
    round
    position="bottom"
    :style="{ height: '60%' }"
    @closed="click_closed"
    :class="{ vantPopup: $store.state.lifeIndexBacColor }"
  >
    <DetailedCard :detailObjs="itemLifeIndex[0]" />
  </van-popup>
  <!-- 防止暗黑模式下遮罩背景色过于深 -->
  <!-- :overlay-style=" $store.state.lifeIndexBacColor ? { 'background-color': 'rgba(0, 0, 0, 0.7)' } : { 'background-color': 'rgba(0, 0, 0, 0.7)' }" -->
</template>

<script>
import { mapMutations, mapState } from "vuex";
//
import DetailedCard from "../../common/detailedCard/DetailedCard";
export default {
  name: "Popup",
  components: {
    DetailedCard,
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["popupFn"]),
    // 关闭Popup之后事件
    click_closed() {
      this.popupFn(false);
    },
  },
  computed: {
    ...mapState(["itemLifeIndex"]),
  },
};
</script>

<style scoped>
.vantPopup {
  background-color: #222;
}
</style>